<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div id="app">
  <h1>{{ title }}</h1>
  <button @click="randomTitle()">改变title</button>
  <button @click="destoryVm()">销毁实例</button>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',   // mount到DOM上
    data () {
      return {
        title: 'Hello World'
      }
    },
    methods: {
      randomTitle () {
        this.title = 'Hello ' + ['China', 'World', 'Universe'][Math.floor(Math.random() * 2.999)]
      },
      destoryVm () {
        this.$destroy()
      }
    },
    // 实例初始化之后，数据观测和事件绑定之前
    beforeCreate () {
      console.log('before create')
    },
    // 实例初始化完成，挂载尚未开始时
    created () {
      console.log('created')
    },
    // 挂载之前，render函数首次被调用时
    beforeMount () {
      console.log('before mount')
    },
    // 在实例挂载到DOM节点上之后
    mounted () {
      console.log('mounted')
    },
    // 数据更新时，在虚拟DOM状态变化之前
    beforeUpdate () {
      console.log('before update')
    },
    // 虚拟DOM被重新渲染之后
    updated () {
      console.log('updated')
    },
    // 实例销毁之前，此时实例依然可用
    beforeDestroy () {
      console.log('before destroy')
    },
    // 实例销毁后，此时Vue实例及其子实例将完全解绑
    destroyed () {
      console.log('destroyed')
    }
  })
</script>
</body>
</html>